/* 
  1. useCallback
  2. useMemo
*/
import React from "react";
import { useState, useCallback } from "react";
const Demo = (props) => {
  console.log("demo组件渲染了");
  props.myClick();
  return (
    <div>
      <h1>Demo 组件</h1>
    </div>
  );
};
const MemoDemo = React.memo(Demo);

const App = () => {
  let [num, setNum] = useState(666);
  // const myClick = (params) => {
  //   console.log("myClick");
  // }
  const myClick = useCallback(() => {
    console.log("myClick");
  },[num]);
  return (
    <div>
      <MemoDemo myClick={myClick}></MemoDemo>
      <h1>App 组件</h1>
      <button
        onClick={() => {
          setNum(num + 1);
        }}
      >
        加{num}
      </button>
    </div>
  );
};

export default App;
